<template>
    <div id='accountManagement'>
        <div class="titleTop" style="margin-bottom: 20px;">
            <div class="titleLeft">
                <i class="iconfont icontongyong_dangqianweizhi"></i>
                <span>系统</span>
                <i class="el-icon-arrow-right"></i>
                <span class="activetit"> 账号管理</span>
            </div>
        
        </div>
        <section class="part">
            <configS :configs='configs' @changeItem='changeItem'></configS>
            <div class="addbtn">
                <el-button @click="addAccount" type="warning"><i style="font-size: 21px" class='iconfont iconluruzhong'></i>新增账号</el-button>
            </div>
            <div class="tabledata">
                <el-table :data="tableData" border>
                    <el-table-column v-for="(item, index) in tableCols" :key="index" :prop='item.prop' :label="item.label"></el-table-column>
                    <el-table-column  label="操作"  width="180">
                        <template slot-scope="scope">
                            <el-button @click="preview(scope.row)" class="edit" type="text" size="small">修改</el-button>
                            <el-button type="text"  @click="del(scope.row)" class="del" size="small">{{scope.row.state == 1 ? '冻结' : '恢复使用'}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            <el-pagination 
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="10"
                prev-text='上一页'
                next-text='下一页'
                layout="total, prev, pager, next"
                :total="total">
            </el-pagination>
            </div>
            
        </section>
    <el-dialog
        title="新增"
        :visible.sync="dialogVisible" center
        width="30%">
        <el-form label-width="80px" :model="formData">
            <el-form-item label="姓名">
                <el-input placeholder="请输入姓名" v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="账号">
                <el-input placeholder="请输入账号" v-model="formData.phone"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input placeholder="请输入密码" v-model="formData.password"></el-input>
            </el-form-item>
            <el-form-item label="岗位">
                  <el-select v-model="formData.stationId" placeholder="请选择岗位">
                        <el-option  v-for="item in options"  :key="item.id"   :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button style="width: 50%" type="primary" @click="apiAddAccount">提 交</el-button>
        </span>
    </el-dialog>
    <el-dialog
        title="修改"
        :visible.sync="editdialog" center
        width="30%">
        <el-form label-width="80px" :model="formData">
            <el-form-item label="姓名">
                <el-input placeholder="请输入姓名" v-model="formData.name"></el-input>
            </el-form-item>
            <el-form-item label="账号">
                <el-input placeholder="请输入账号" v-model="formData.phone"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input placeholder="请输入密码" v-model="formData.password"></el-input>
            </el-form-item>
            <el-form-item label="岗位">
                  <el-select v-model="formData.stationId" placeholder="请选择岗位">
                        <el-option  v-for="item in options"  :key="item.id"   :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button style="width: 50%" type="primary" @click="editAddAccount">提 交</el-button>
        </span>
    </el-dialog>
    </div>
</template>

<script>
import configS from '../../components/config'
export default {
    name: 'accountManagement',
    components: {
        configS
    },
    data() {
        return {
            configs: [
                {
                    title: '账号角色：',
                    configs: []
                }
            ],
             tableCols: [
                {label : 'ID', prop:'id'}, {label : '姓名', prop:'name'}, {label : '岗位', prop:'stationName'},
                {label : '手机', prop:'phone'}, {label : '注册时间', prop:'createTime'}
            ],
            tableData: [],
            currentPage: 1,
            total: 0,
            formData: {},
            options: [],
            stationId: '',
            dialogVisible: false,
            editdialog: false
        }
    },
    created() {
        this.apiGetrole()
        this.apiGetAccountList()
    },
    methods: {
        apiGetrole() {
            this.$api.apiAccoutRole().then(({data}) => {
                this.options = data.data
                let cfs = Object.assign(data.data)
                cfs.unshift({
                    name: '全部',
                    stationId: ''
                })
                cfs.forEach((item, index) => {
                    if(index == 0) {
                        // Vue 不允许在已经创建的实例上动态添加新的根级响应式属性, Vue 无法探测普通的新增属性  Vue.set(target, key, value)
                        this.$set(item, 'isactive', true)
                    } else {
                        this.$set(item, 'isactive', false)
                    }  
                })
                this.configs[0].configs = cfs
            })
        },
        apiGetAccountList() {
            let param = {
                stationId: this.stationId,
                page: this.currentPage
            }
            this.$api.apiAccountList(param).then(({data}) => {
                this.tableData = data.data
                this.tableData.forEach(item => {
                    item.createTime = this.$moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
                })
                this.total = data.pageInfo.total
            })
        },
        apiAddAccount() {
            this.$api.apiAddAccount(this.formData).then(res => {
                this.$message({
                    type: 'success',
                    message: '添加成功'
                })
                this.formData = {}
                this.apiGetAccountList()
                this.dialogVisible = false
            })
        },
        editAddAccount() {
            let {createTime, stationName, state, ...rest} = this.formData
            this.$api.apiEditAccount(rest).then(res => {
                this.$message({
                    type: 'success',
                    message: '修改成功'
                })
                this.formData = {}
                this.apiGetAccountList()
                this.editdialog = false
            })
        },
        del(row) {
            // 是否冻结
            let param = {
                id: row.id,
                state: Number(row.state) == 1 ? 2 : 1
            }
            this.$api.apiDisAccount(param).then(res => {
                let msg = ''
                if(Number(row.state == 1)) {
                    msg = '冻结成功'
                }else {
                    msg = '账号可正常使用'
                }
                this.$message({
                        type: 'success',
                        message: msg
                })
                this.apiGetAccountList()
            })
        },
        preview(row) {
            this.formData = row
            this.editdialog = true
        },
        changeItem(val) {
            this.stationId = val.id
            this.currentPage = 1;
            this.apiGetAccountList()
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.apiGetAccountList();
            console.log(`当前页: ${val}`);
        },
        addAccount() {
            this.dialogVisible = true
        }
    }
}
</script>
<style lang="scss">
.el-select-dropdown__item:hover{
            background-color: #F29207;
            color: white;
    }
#accountManagement{
    .el-select{
        display: block;
       
    }
    
    .part{
        padding: 0;
        padding-bottom: 30px;
        .tabledata {
            width: 88%;
            margin: 20px auto;
            .el-pagination{
                text-align: right;
                margin: 20px 0
            }
        }
    }
}
.addbtn {
    text-align: right;
    margin: 22px;
    margin-right: 6%
}
.edit {
    color: #C90303
}
.activetit{
    color: #1E7CF0
}
</style>
